<template>
  <div id="app">
    <div class="momentContent">hello! My name is LWF</div>
    <div>
      <textarea v-model="commentContent"></textarea>
      <div class="momentCommentSumit">
        <button @click="sendComment()">add comment</button>
      </div>
      <Comment :commentList="commentList"></Comment>
    </div>
  </div>
</template>

<script>
import Comment from "./Comment";
import {
  initLocalStorage,
  addMomentComment
} from ".././utils/commentController";
export default {
  name: "ThreadPage",
  components: { Comment },
  data() {
    return {
      commentContent: "",
      commentList: []
    };
  },
  provide() {
    return {
      reload: this.reload
    };
  },
  created() {
    initLocalStorage();
    this.commentList = JSON.parse(localStorage.getItem("commentList"));
  },
  methods: {
    sendComment() {
      addMomentComment(this.commentContent);
      this.reload();
    },
    reload() {
      this.commentList = JSON.parse(localStorage.getItem("commentList"));
    }
  }
};
</script>

<style>
.momentContent {
  margin: 50px 0 10px 0;
}
.momentCommentSumit {
  margin: 0 0 30px 0;
}
</style>
